<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始化vue</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<!--初识Vue-->
<!--1.想让Vue工作，必须创建一个Vue实例，且传入一个配置对象-->
<!--2.root容器里的代码依旧保持html规范，只不过混入了Vue语法-->
<!--3.root容器中的代码被称为Vue模板-->
<!--4.容器与实例一对一的对应关系-->
<!--5.真实开发中只有一个实例，并且会配合组件一起使用-->
<!--6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性-->
<!--7.data中的数据发生变化，页面中的数据也会自动发生变化；-->

<body>
<!--准备好容器-->
<div id = 'root'>
    <h1>hello,{{name}},{{address}}</h1>
</div>
<div id = 'root1'>
    <h1>hello,{{name}},{{address}}</h1>
</div>



<script type="text/javascript">
    Vue.config.productionTip = false
    // 创建实例
    new Vue(
        {
            el:'#root', //指定为那个容器服务，通常值为css选择器
            // el:document.getElementById("root")  也可以
            data:{
                name:'王凯',//data存储数据，供el里的元素使用。值暂时写成一个对象。
                address:'北京'//data存储数据，供el里的元素使用。值暂时写成一个对象。
            }

        }
    )
    new Vue(
        {
            el:'#root1', //指定为那个容器服务，通常值为css选择器
            // el:document.getElementById("root")  也可以
            data:{
                name:'王凯',//data存储数据，供el里的元素使用。值暂时写成一个对象。
                address:'北京'//data存储数据，供el里的元素使用。值暂时写成一个对象。
            }

        }
    )
</script>
</body>
</html>